﻿import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';

import { List, InputItem, WhiteSpace, WingBlank, Button,Flex } from 'antd-mobile';
import { createForm } from 'rc-form';

import { FormattedMessage} from 'react-intl';


class App extends React.Component { 
	constructor(props) {
		super(props);
		this.state={
			errorMap:{},
			mobile:''
		}		

		const Lang = window.LangMessage ||{};

		this.keyCodes = [
		{
			keycode:"captcha",
			text:Lang.verify_code || "验证码",
			tip:Lang.verify_code || "验证码",
			required:true,
			extra:<button onClick={this.getCptcha}><FormattedMessage id='get_code' defaultMessage='获取验证码'/></button>
		}];
	  }

	componentDidMount(){
		const {cardInfo} = this.props;
		console.log(cardInfo);
		this.setState({
			mobile: T.urlQuery("phone")
		})
	
	}

		getCptcha = ()=>{
		console.log("getCptcha...")
	}

	bindCard= ()=>{
		const Lang = window.LangMessage ||{};
		const {cardInfo} = this.props;
		T.fetch({ //
			url: "/bank/card/bind.json",
			data: cardInfo,
		}).then((res) => {
			if (res.success) {
				if(res.value){
					T.showInfo(Lang.bind_bankcard_success || "绑定银行卡成功");
				}
			}
	});
	}

	onErrorClick=(keyCode)=>{	//点击报错icon出现的提示	
		const {getFieldError } = this.props.form;
		let msg = getFieldError(keyCode);
		if(msg){			
			T.showError(msg.join(","));
		}	
	}
	
	submit=()=>{
		this.props.form.validateFields((error, values) => {
			var errorMap ={}
			if(error){
				for(var key in error){
					errorMap[key] = 1;
				}
			}else{
				//T.showSuccess("没有错误");	
				T.fetch({ //手机验证码校验
				url: "/verify/code/phone.json",
				data: {"serialNo": "421121199501011234",
					   "code": "23453476468745673547"
					  },
				}).then((res) => {
					if (res.success) {
					if(res.value){
						//绑定银行卡
					this.bindCard();

					}
				}		
			   });
			}

			this.setState({
				errorMap
			});
			console.log(error, values);
		});
	}

	render() {
		const { getFieldProps } = this.props.form;
		return (<div className="">
			<WhiteSpace/>
			<WingBlank>
			<p><FormattedMessage id='input_phone' defaultMessage='请输入手机号'/>{this.state.mobile}<FormattedMessage id='received_code' defaultMessage='收到的短信验证码'/></p>
			</WingBlank>
			<WhiteSpace/>
			<List>
			{this.keyCodes.map((item,index)=>
				<InputItem  key={index}
				{...getFieldProps(item.keycode,{
					rules: [{
						required: item.required === undefined ? true:item.required,
						message:item.message || (item.tip),
						pattern:item.pattern,
						name:item.name
					}]
				})}
				type={item.type}
				name={item.name}
				extra={item.extra}
				error ={this.state.errorMap[item.keycode]}
				onErrorClick={this.onErrorClick.bind(this,item.keycode)}
				clear
				placeholder={item.tip}
				>{item.text}</InputItem>
			
			)}			
		</List>
			
			<WhiteSpace/>
			<WhiteSpace/>
			<WingBlank>	
			<Button type="primary" inline  onClick={this.submit} className="diy_background" style={{width:'100%'}}><FormattedMessage id='verify_info' defaultMessage='验证信息'/></Button>				
			</WingBlank>				
		</div>)	
	}
	
}

const AppForm = createForm()(App);

export default connect(state => {
    return state.bankcardInfo;
  })(AppForm)